<template>
    <div class="loading-wrap" v-show="isShow">
        <div class="loading-img"></div>
    </div>
</template>

<script>
export default {
    name:'loading',
    data(){
        return {
            isShow:false
        }
    }
}
</script>

<style lang="scss" scoped>
    .loading-wrap{
        @include size(100%,100%);
        position: fixed;
        top:0;
        left:0;
        background: rgba(0,0,0,.2);
        .loading-img{
            @include size(70px,70px);
            @include centerer();
            background-size: auto 70px;
            background-position: 0 0;
            background-repeat: no-repeat;
            background-image: url("https://img.dmallcdn.com//dshop/201903/40208262-8001-4c19-ad20-370a039ed243");
            animation:loading .9s steps(25) infinite
        }
    }
    @keyframes loading{
        100%{
            background-position: -1750px 0
        }
    }
</style>

